<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <link rel="stylesheet" href="__STATIC__/index/css/common.css">
    <link rel="stylesheet" href="__STATIC__/index/css/index.css">
    <!-- 移动端适配 -->
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 10 + 'px';
        }
    </script>
    <style type="text/css">
    	.wtinp {
		    width: 65%;
		    border: none;
		    background-color: #FFF;
		    height: 40px;
		    border-top-left-radius: 0.34666667rem !important;
		    border-bottom-left-radius: 0.34666667rem !important;
		    margin: 0 !important;
		    padding-left:1em ;
		    box-shadow: 2px 2px 2px #FFDA1C;
		}
		.wtbut {
			position: absolute;
		    width: 35%;
		    height: 40px;
		    border: none;
		    border-top-right-radius: 0.34666667rem !important;
		    border-bottom-right-radius: 0.34666667rem !important;
		    background-color: #FFDA1C;
		    box-shadow: 2px 2px 2px #FFDA1C;
		    color: #FFF;
		    top: 0;
		    right: 2%;
		    font-size: 20px;
		}
		.winningrow{
			width: 83%;
			margin: 0 auto;
			height: 6px;
			background-color: #481693;
			border-radius: 10px;
			z-index: 1;
		}
    	.winningmain{
    		width: 80%;
    		background-color: #6C27D0;
    		margin: 0 auto;
    		z-index: 2;
			position: relative;
			top: -2px;
			padding: 0.2em 0 1em 0;
    	}
    	
		
		.scrolldiv{
				height: 120px;
	         	overflow: hidden;
			}
			table{
	    		width: 100%;
	         	overflow: hidden;
    	}
    	table tr{
    		line-height:24px;
    	}
    	table tr td{
    		text-align: center;
    		color: #F4C7FD;
    		line-height:24px;
    	}
    	table tr:nth-child(odd){
			background: #8C49F1;
		}
		table tr:nth-child(even){
			background: #7C35EB;
		}
		.activitydiv{
			width: 100%;
			text-align: center;
		}
		.activitydiv>div{
			color: wheat;
			text-decoration:underline;
		}
		.color650E01{
			color: #650E01;
		}
		.activity2 {
    		padding: 0rem 0rem 20px 0rem;
		}
		
		.banner .turnplate {
		    display: block;
		    width: 75%;
		    position: relative;
		    margin: auto;
		}
		.activity-amin {
		    width: 80%;
		    margin: 0rem auto;
		}
		.banner{
			margin-top: 10px;
		}
		
element.style {
}
.activitydiv>div {
    color: wheat;
    text-decoration: underline;
}
.rule{
    position: relative;
    z-index: 1;
    margin: auto;
    width: 20% !important;
    height: 0.76666667rem;
    border: 0;
    line-height: 0.75333333rem;
    text-align: center;
    color: white;
    border-radius: 0;
}
.footdivcss{
	width: 100%;
	position: relative;
	top: 20px;
}
.footdivcss>div{
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 50%;
	position: absolute;
	background-color: #2A0753;
	top: -20px;
}
.footdivcss>div:first-child{
	left: -10px;
}
.footdivcss>div:last-child{
	right: -10px;
}
    </style>
</head>

<body>
<div id="wrap">
    <div class="header clearfix">
        <!--
        	作者：592176224@qq.com
        	时间：2019-01-09
        	描述：
        <a href="{:url('Index/activity_prizes',['id'=>$id])}" id="myWin">
            <p class="my fr">我的奖品</p>
        </a>
        -->
        <div class="title"></div>
    </div>

    <!--轮盘-->
    <div class="banner">
        <div class="turnplate bgimg">
            <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
            <div id="" class="pointer" ></div>
        </div>
    </div>
    <div class="activity1" style="margin-bottom: 20px;">
        <div class="activity-amin" style="position: relative;">
            <input type="number" maxlength="13" class="wtinp" id="text2" placeholder="请输入手机账号"/>
            <button class="wtbut color650E01 pointer">开始抽奖</button>
        </div>
    </div>
    <div class=" activity2">
    	<div class="winningrow">
    	</div>
    	<div class="winningmain">
    	 <div class="activity-amin" style="display: flex;justify-content: space-between;align-items: flex-end;">
    	 	 <div style="font-size: 2.5em;color: #FEE613;">中奖榜单 </div>
			<!--  <div style="color: white;">累计<span style="color: #FEE613;">
			 	12345
			 </span>人中奖</div> -->
    	 </div>
		 <div class="activity-amin" >
		 	<div class="scrolldiv" id="scrolldiv">
			 	<table class="" cols="4" rows="4" id="tableid">
				<volist name="my_activity" id="vo">
					 <tr>
					   <td>{$vo.time}</td>
					   <td>{$vo.prize_name}</td>
					   <td>受理成功</td>
					 </tr>
					</volist> 
			 	</table>
			 	<table class="" id="tableid2"></table>
		 	</div>
		 </div>
		 <div class="footdivcss">
		 	<div class="">
		 	</div>
		 	<div class="">
		 	</div>
		 </div>
		</div> 
		
	</div>

    <div class="activitydiv" id="activitydiv">
		<div class="rule">活动规则</div>
	</div>

    <!--游戏规则弹窗-->
    <div id="mask-rule">
        <div class="box-rule">
            <h2>活动规则说明</h2>
            <span id="close-rule"></span>
            <div class="con">
                <div class="text">
                    {$activity.description}
                </div>
            </div>
        </div> 
    </div>
    <!--中奖提示-->
    <div id="mask">
        <div class="blin"></div>
        <div class="caidai"></div>
        <div class="winning">
            <p><b>恭喜您</b><br/>抽中了<span id="text1"></span></p>
            <a href="#" target="_self" class="btn">确定</a>
         
        </div>
    </div>
    <!--中奖提示-->
    <div id="mask2"> 
        <div class="blin"></div>
        <div class="caidai"></div>
        <div class="winning">
            <p><br/><b>谢谢参与</b></p>
            <a href="#" target="_self" class="btn">确定</a>
        </div>
    </div>
</div>


<script src="__STATIC__/index/js/jquery-1.11.3.min.js"></script>
<script src="__STATIC__/index/js/jquery.rotate.js"></script>
<script src="__STATIC__/index/js/h5_game_common.js"></script>
<!--<script src="__STATIC__/index/js/index.js"></script>-->
<script type="text/javascript">
     

</script>
<script src="__STATIC__/index/js/jquery.superslide.2.1.1.js"></script>
<script type="text/javascript">jQuery("#txtMarqueeTop").slide({ mainCell:"ul",autoPlay:true,effect:"topMarquee",interTime:50,vis:6  });
</script>
<script type="text/javascript">
 //$(".activity").css({"display":"none"})
 /*判断手机号不为空和是否是正确的手机号，给验证码按钮添加样式*/
 var text2=$("#text2").val();
 if(text2 =="" && !/^1[34578]\d{9}$/.test(text2)){
     var ist = true;

 }
 var activity_id = 0;
 var pid = 0;
 var table = document.getElementById("tableid");
 var scrolldiv = document.getElementById("scrolldiv");
 let length = table.getElementsByTagName("tr").length;
 var speed = 40;
function Marquee() {
		if (scrolldiv.scrollTop > table.clientHeight) {
			scrolldiv.scrollTop = 0;
		} else {
			scrolldiv.scrollTop++;
		}
}
if((length*24) > scrolldiv.clientHeight){
	let table2 = document.getElementById("tableid2");
	table2.innerHTML = table.innerHTML;
	var MyMar = setInterval(Marquee, speed);
}
 
 var val = "";

$(function () {
    // var jiangpin = 
    //console.log({$activity_name});
    var draw={$activity_name};
    //console.log(draw);
   //console.log(draw);
    var $ring = $(".ring"),
        $prize = $(".prize"),//转盘
        $btn = $(".pointer"),//按钮
        $change = $("#change"),//显示剩余抽奖机会
        $li = $(".scroll li"),//中奖信息滚动的盒子
        $sNum = $(".start-num"),//手机头号，三位数
        $eNum = $(".end-num"),//手机尾号，四位数
        $info = $(".info"),//中奖提示信息
        data = {count: 10},//次数
        bool = false,//判断是否在旋转，true表示是，false表示否
        timer,//定时器
        turnplate = {
            restaraunts:draw,//中奖提示, //大转盘奖品名称
            colors:["#FFC027", "#FBE03F", "#FFC027", "#FBE03F","#FFC027", "#FBE03F","#FFC027", "#FBE03F","#FFC027", "#FBE03F","#FFC027", "#FBE03F","#FFC027", "#FBE03F","#FFC027", "#FBE03F","#FFC027"], //大转盘奖品区块对应背景颜色
            outsideRadius: '', //大转盘外圆的半径 192
            textRadius: '', //大转盘奖品位置距离圆心的距离 155
            insideRadius: '', //大转盘内圆的半径 68
            startAngle: 0, //开始角度
            bRotate: false //false:停止;ture:旋转
        };
  
    init();
    drawRouletteWheel();
    function init() {
        timer = setInterval(function () {
            $ring.toggleClass("light");
        }, 1000);
    }
    function rotateTimeOut() {
        $('#wheelcanvas').rotate({
            angle: 0,
            animateTo: 2160,
            duration: 8000,
            callback: function() {
                alert('网络超时，请检查您的网络设置！');
            }
        });
    };

    

    //旋转转盘 item:奖品位置; txt：提示语;
    function rotateFn(item, txt) {

        var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
        //console.log("angles==",angles);
        if(angles < 270) {
            angles = 270 - angles;
        } else {
            angles = 360 - angles + 270;
        }
        $('#wheelcanvas').stopRotate();
        $('#wheelcanvas').rotate({
            angle: 0,
            animateTo: angles + 1800,
            duration: 8000,
            callback: function() {
               /*
               获取的接口
               */
               $.post("{:url('Index/send_red')}",{'activity_id':activity_id,"pid":pid},function(result){
                    bool = false;
                    if(result.code == 0){
                        alert(result.msg);
                        return false
                    }else{
                        
                        win(txt);
                        show(1, 1, txt);
                    }
                });
            }
        });
        
    };


function pointerclick(){
    var text2=$("#text2").val();
            //console.log(text2);return false;
        if(text2 !="" && /^1[34578]\d{9}$/.test(text2)){
            ist = false;
            if(!bool){
                
           
                $.post("{:url('Index/set_mobile')}",{'mobile':text2},function(result){console.log("绑定",result);                 
                if(result.code==0){
                   // $(".prompt1").text(result.msg);
                   //console.log("查看是否能抽奖",result.msg)

                   alert(result.msg);
                   bool = false;
                    return false;
                }
              
            });
            return true;
             }
            
        }else if(text2 =="" ){
            //$(".prompt1").show();
            //$(".prompt1").text("请输手机号码");
            alert("请输入手机号！");
            ist = true;
            return false;

        }else if(!/^1[34578]\d{9}$/.test(text2)){
           // $(".prompt1").show();
            //$(".prompt1").text("手机号码错误！");
            alert("手机号码错误！");
            ist = true;
            return false;
        }else if(val == "手机号码错误"){
            //$(".prompt1").show();
            //$(".prompt1").text("手机号码错误！");
            alert("手机号码错误！");
            ist = true;
            return false;
        }else{
           // $(".prompt1").show();
            ist = true;
            return false;   
        }
}

    //点击抽奖
    $btn.click(function () {
        if(!pointerclick()){
             return;
        }
       if (bool) {return}; 
        if (ist) {return};
        bool = true; // 标志为 在执行
        if (data.count <= 0) { //当抽奖次数为0时
            $change.html(0);//次数显示为0
            bool = false;
            alert("没有次数了");
        } else { //还有次数就执行
            //console.log("开始z");
            data.count--;
            data.count <= 0 && (data.count = 0);
            $change.html(data.count);//显示剩余次数
            $prize.removeClass("running");
            var activity={$activity.id};

            $.post("{:url('Index/prize')}",{'activity_id':activity},function(result){

                if(result.msg){
                    alert(result.msg);
                    bool = false;
                    return;
                }

                var a ={$activity_name};
                var b = result.message;
               
                for(var i = 0; i<a.length; i++){ 
                    if(b == a[i]){
                        //console.log("转盘旋转开始！");
                        clickFn(i);
                    }
                }

                activity_id = result.activity_id;
                pid = result.pid;
            });
        }
    });

    

    //随机概率
    function clickFn(item) {
            //获取随机数(奖品个数范围内)
            // var item =2;

            console.log(item,"item");
            //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
             // console.log(turnplate.restaraunt,"1");
              rotateFn(item+1, turnplate.restaraunts[item]);

            //  switch (item) {
            //     case 1:
            //         rotateFn(item, turnplate.restaraunts[0]);
            //         break;
            //     case 2:
            //         rotateFn(item, turnplate.restaraunts[1]);
            //         break;
            //     case 3:
            //         rotateFn(item, turnplate.restaraunts[2]);
            //         break;
            //     case 4:
            //         rotateFn(item, turnplate.restaraunts[3]);
            //         break;
            //     case 5:
            //         rotateFn(item, turnplate.restaraunts[4]);
            //         break;
            //     case 6:
            //         rotateFn(item, turnplate.restaraunts[5]);
            //         break;
            //     case 7:
            //         rotateFn(item, turnplate.restaraunts[6]);
            //         break;
            //     case 8:
            //         rotateFn(item, turnplate.restaraunts[7]);
            //         break;
            //     case 9:
            //         rotateFn(item, turnplate.restaraunts[8]);
            //         break;
            //     case 10:
            //         rotateFn(item, turnplate.restaraunts[9]);
            //         break;
            // }
     }


             function rnd(n, m) {
                var random = Math.floor(Math.random() * (m - n + 1) + n);
                return random;
            }

            //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    

            function drawRouletteWheel() {

                  var docWidth = document.documentElement.clientWidth;
                 var bodywidth = document.body.clientWidth;
                 var canvaswidth = parseInt(bodywidth * 1.2);
                if(canvaswidth%2 != 0){
                    canvaswidth++;
                }
                 var canvaswidth2 = parseInt(canvaswidth/2);
               
                turnplate.outsideRadius = parseInt (canvaswidth * 0.45);  
                turnplate.textRadius= parseInt (canvaswidth * 0.36); //大转盘奖品位置距离圆心的距离 155
                turnplate.insideRadius= parseInt (canvaswidth * 0.16);//大转盘内圆的半径 68
               
          
                var canvas = document.getElementById("wheelcanvas");
                //console.log(canvas);
                canvas.width = canvaswidth;
                canvas.height = canvaswidth;
              
                if(canvas.getContext) {
                    //根据奖品个数计算圆周角度
                    var arc = Math.PI / (turnplate.restaraunts.length / 2);
                 
                    var ctx = canvas.getContext("2d");

                    //在给定矩形内清空一个矩形
                    ctx.clearRect(0, 0, canvaswidth, canvaswidth);
                    //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
                    ctx.strokeStyle = "#FFBE04";
                    //font 属性设置或返回画布上文本内容的当前字体属性
                    var fsize = parseInt(canvaswidth * 0.03);
                    var Msize = parseInt(canvaswidth * 0.047);
                    ctx.font =  fsize + 'px Microsoft YaHei';
                    console.log(turnplate.restaraunts.length);
                    for(var i = 0; i < turnplate.restaraunts.length; i++) {
                        var angle = turnplate.startAngle + i * arc;
                        ctx.fillStyle = turnplate.colors[i];
                        ctx.beginPath();
                        //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
                        ctx.arc(canvaswidth2, canvaswidth2, turnplate.outsideRadius, angle, angle + arc, false);
                        ctx.arc(canvaswidth2, canvaswidth2, turnplate.insideRadius, angle + arc, angle, true);
                        ctx.stroke();
                        ctx.fill();
                        //锁画布(为了保存之前的画布状态)
                        ctx.save();
                        //----绘制奖品开始----
                        ctx.fillStyle = "#E5302F";
                        var text = turnplate.restaraunts[i];
                        //parseInt(canvaswidth * 0.04);
                        var line_height = parseInt(canvaswidth * 0.04);  //行高17
                        //translate方法重新映射画布上的 (0,0) 位置
                        ctx.translate(canvaswidth2 + Math.cos(angle + arc / 2) * turnplate.textRadius, canvaswidth2 + Math.sin(angle + arc / 2) * turnplate.textRadius);

                        //rotate方法旋转当前的绘图
                        ctx.rotate(angle + arc / 2 + Math.PI / 2);

                        /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                        if(text.indexOf("M") > 0) { //流量包
                            var texts = text.split("M");
                            for(var j = 0; j < texts.length; j++) {
                                ctx.font = j == 0 ? 'bold ' + Msize + 'px Microsoft YaHei' : fsize + 'px Microsoft YaHei';
                                if(j == 0) {
                                    ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
                                } else {
                                    ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                                }
                            }
                        } else if(text.indexOf("M") == -1 && text.length > 6) { //奖品名称长度超过一定范围 
                            text = text.substring(0, 6) + "||" + text.substring(6);
                            var texts = text.split("||");
                            for(var j = 0; j < texts.length; j++) {
                                ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                            }
                        } else {
                            //在画布上绘制填色的文本。文本的默认颜色是黑色
                            //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
                            ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                        }

                        //添加对应图标
                        if(text.indexOf("闪币") > 0) {
                            // var img = document.getElementById("shan-img");
                            // img.onload = function() {
                            //     ctx.drawImage(img, -15, 10);
                            // };
                            // ctx.drawImage(img, -15, 10);
                        } else if(text.indexOf("谢谢参与") >= 0) {
                            // var img = document.getElementById("sorry-img");
                            // // img.onload = function() {
                            // //     ctx.drawImage(img, -15, 10);
                            // // };
                            // ctx.drawImage(img, -15, 10);
                        }
                        //把当前画布返回（调整）到上一个save()状态之前 
                        ctx.restore();
                        //----绘制奖品结束----
                    }
                }
            }

    
    //中奖信息滚动。前两个参数为手机号前三位和后四位手机尾号，text为中的什么奖品
    function show(sNum, eNum, text) {
        //最新中奖信息
        $sNum.eq(2).html(sNum);
        $eNum.eq(2).html(eNum);
        $info.eq(2).html(text);
        $li.css("top", "-" + 40 / 75 + "rem");//滚动
        //滚动之后的处理
        setTimeout(function () {
            $li.css({
                "top": "0",
                "transition": "all 0s ease-in-out"
            });
            //更新中奖信息
            $sNum.eq(0).html($sNum.eq(1).html());
            $eNum.eq(0).html($eNum.eq(1).html());
            $info.eq(0).html($info.eq(1).html());
            $info.eq(1).html($info.eq(2).html());
            $sNum.eq(1).html($sNum.eq(2).html());
            $eNum.eq(1).html($eNum.eq(2).html());
        }, 500);
        $li.css("transition", "all 0.5s ease-in-out");
    }

    //中奖信息提示
    $("#close,.win,.btn").click(function () {
        $prize.addClass("running");
        init();
    });
});


</script>   
</body>
</html>








